<!doctype html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>新闻列表页</title>
  <meta name="description" content="企业站, 新闻列表页">
</head>

<body>
  <div class="app">
    <header class="relative bg-zinc-800 w-full min-h-132px-vw lg:min-h-100px">
      <div class="absolute w-full flex justify-between z-50">
        <a class="logo inline-block w-144px-vw h-48px-vw mt-42px-vw ml-42px-vw lg:w-36 lg:h-12 lg:mt-8 lg:ml-12"
          href="index.html" title="企业站"></a>
        <a class="icon icon-menu menu text-white text-38px-vw mt-42px-vw mr-48px-vw lg:hidden" href="javascript:;" title="菜单"></a>
        <nav class="nav-mb lg:nav-pc">
          <div class="nav-bg-mask lg:hidden"></div>
          <div class="links">
            <a class="icon icon-close close text-white text-38px-vw absolute z-20 right-42px-vw top-42px-vw lg:hidden" href="javascript:;"></a>
            <a class="link " href="index.html">首页</a>
            <a class="link current" href="news.html">新闻列表页</a>
            <a class="link " href="about.html">关于我们</a>
          </div>
        </nav>
      </div>
    </header>
    <main class="w-full flex flex-col">
      <section class="w-full relative pb-54px-vw overflow-hidden">
        <div class="decorate-title font-normal text-white absolute z-10 
        top-64px-vw left-54px-vw text-64px-vw 
        lg:top-9 lg:w-1131px-1vw lg:h-163px-1vw lg:left-1131px-1vw-60left lg:text-128px-1vw">News list page</div>
        <div class="relative z-20 text-48px-vw mt-94px-vw text-black text-center 
        lg:text-48px-1vw lg:mt-118px-1vw">新闻列表页</div>
        <div class="relative z-20 bg-red-500 
        w-128px-vw h-8px-vw mx-auto mt-32px-vw
        lg:w-118px-1vw lg:h-6px-1vw lg:mt-8">
          <!--下划线-->
        </div>
        <template class="news-item-tpl">
          <a href="news-details.html?code={code-encode}" title="{title}"
            class="w-334px-vw mt-64px-vw mx-12px-vw lg:w-348px-1vw lg:mt-14 lg:mx-8 1920:w-344px 1920:mt-14 1920:mx-8">
            <div class="w-full h-518px-vw lg:h-506px-1vw 1920:h-506px">
              <img class="lazyload object-cover w-full h-full tans-scale-ease-out hover-scale" 
              alt="{title}"
              src="../public/res-img/news4-32.jpg"
              {data-src}="{img}" />
            </div>
            <div class="mt-32px-vw lg:mt-9">
              <div class="text-30px-vw font-bold lg:text-20px">{title}</div>
            </div>
          </a>
        </template>
        <template class="news-skeleton-tpl">
          <a title="加载中"
            class="w-334px-vw mt-64px-vw mx-12px-vw lg:w-348px-1vw lg:mt-14 lg:mx-8 1920:w-344px 1920:mt-14 1920:mx-8">
            <div class="w-full h-518px-vw lg:h-506px-1vw 1920:h-506px">
              <img class="lazyload object-cover w-full h-full tans-scale-ease-out hover-scale" 
              alt="加载中..."
              src="../public/res-img/news4-32.jpg" />
            </div>
            <div class="mt-32px-vw lg:mt-9">
              <div class="text-30px-vw font-bold lg:text-20px"></div>
            </div>
          </a>
        </template>
        <template class="news-error-tpl">
          <div
            class="w-334px-vw mt-64px-vw mx-12px-vw lg:w-348px-1vw lg:mt-14 lg:mx-8 1920:w-344px 1920:mt-14 1920:mx-8">
            <div class="mt-32px-vw lg:mt-9">
              <div class="text-30px-vw font-bold lg:text-20px">[{error-code}] {error-desc}</div>
            </div>
          </div>
        </template>
        <div class="news-list flex lg:mt-14 justify-center flex-wrap text-black">
          <!-- 新闻内容 循环-start -->
          <div class="text-20px-vw">loading</div>
          <!-- 新闻内容 循环-end -->
        </div>
        <template class="page-ctl-tpl" data-page-current-class="current" data-page-disabled-class="disabled">
          <div class="select-wrap relative border-gray-300 border">
            <select class="page-ctl-pagesize-select border-none appearance-none relative bg-transparent w-full h-full z-10
            pl-16px-vw pr-42px-vw
            lg:pl-4 lg:pr-11">
              <option value="4">4条/页</option>
              <option value="8" selected="selected">8条/页</option>
              <option value="16">16条/页</option>
              <option value="32">32条/页</option>
            </select>
          </div>
          <a class="page-ctl-prev text-black bigarea ml-32px-vw lg:ml-8" href="javascript:;"><i class="icon icon-arrow-left"></i></a>
          <div class="page-ctl-pages">
            <a class="ml-32px-vw lg:ml-8 bigarea page-ctl-page" href="javascript:;">1</a>
            <span class="ml-32px-vw lg:ml-8 page-ctl-omit">...</span>
          </div>
          <a class="page-ctl-next text-black bigarea ml-32px-vw lg:ml-8" href="javascript:;"><i class="icon icon-arrow-right"></i></a>
          <div class="flex ml-32px-vw lg:ml-8">
            <div>前往</div>
            <input type="number" class="page-ctl-go w-54px-vw h-32px-vw ml-8px-vw lg:h-8 lg:ml-2 bigarea border-gray-300 border"/>
            <div class="ml-8px-vw lg:ml-2">页</div>
          </div>
          <div>
          </div>
        </template>
        <div class="page-ctl flex justify-center text-gray-500
        mt-42px-vw text-16px-vw leading-32px-vw h-32px-vw
        lg:mt-14 lg:text-xs lg:leading-8 lg:h-8">
        </div>
      </section>
    </main>
    <footer class="bg-footerbg">
      <div class="flex justify-center flex-col lg:flex-row">
        <div class="text-white text-24px-vw ml-64px-vw mt-32px-vw lg:text-16px lg:mt-12">地址：中国山东省青岛市市南区某某中路20号</div>
        <div class="text-white text-24px-vw ml-64px-vw mt-32px-vw lg:text-16px lg:mt-12">邮箱：<a href="mailto:1370XXX171@qq.com">1370XXX171@qq.com</a></div>
        <div class="text-white text-24px-vw ml-64px-vw mt-32px-vw lg:text-16px lg:mt-12">电话：<a href="tel:0591-88888888">0591-88888888</a></div>
      </div>
      <div class="flex justify-center mt-32px-vw pb-54px-vw ml-64px-vw mr-42px-vw lg:mt-12 lg:pb-12">
        <img alt="二维码" data-src="../public/res-img/qrcode-original.jpg" class="lazyload w-72px-vw h-72px-vw lg:w-12 lg:h-12" />
        <div class="text-white text-24px-vw ml-12px-vw lg:text-16px lg:ml-3 lg:mt-3">Copyright © 2009 - 2022 Cld , All
          Rights Reserved 某某网络科技有限公司 版权所有
          陕ICP备xxxxxxx号</div>
      </div>
    </footer>
  </div>
</body>

</html>